<template>
	<div class="">
		<el-tabs tab-position="left" @tab-click="handleClick">
			<el-tab-pane :label="item" v-for="(item,index) in specialList" :key="index">
				<div class="row-me space-between margin-bottom20">
					<el-button class="el-icon-refresh" type="text" @click="refresh">刷新</el-button>
					<el-input class="width200" placeholder="请输入关联名称" prefix-icon="el-icon-search" v-model="query.searchWord"
						@change="refresh">
					</el-input>
				</div>
				<el-table ref="myTable" :data="shopList" tooltip-effect="dark" border
					@selection-change="val=>handleSelectionChange(val,index)" v-if="index==tabIndex">
					<el-table-column type="selection" width="50" align="center">
					</el-table-column>
					<el-table-column label="名称" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
				</el-table>
				<el-pagination class="margin-top10" background layout="->,total,sizes, prev, pager, next"
					:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChange" :current-page="query.pageNumber"
					:total="pageTotal" @current-change="handlePageChange">
				</el-pagination>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				query: {
					type: 1,
					searchWord: '',
					pageNumber: 1,
					pageSize: 30
				},
				specialList: ['课程商品', '专项试题'],
				shopList: [],
				pageTotal: 0,
				tabIndex: 0,
				multipleSelection: [],
				multipleSelection2: [],
				type: 0
			}
		},
		methods: {
			show(type) {
				this.type = type || 0
				if (type == 1) {
					this.specialList = ['课程商品']
					this.getPageProduct()
				} else if (type == 2) {
					this.specialList = ['专项试题']
					this.getPageSubject()
				} else {
					this.getPageProduct()
				}
			},
			//联保商品刷新
			refresh() {
				if (this.type == 1) {
					this.getPageProduct()
				} else if (this.type == 2) {
					this.getPageSubject()
				} else {
					if (this.tabIndex == 0) {
						this.getPageProduct()
					} else {
						this.getPageSubject()
					}
				}
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.refresh()
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.refresh()
			},
			handleClick(tab, event) {
				this.tabIndex = tab.index
				switch (tab.index) {
					case '0':
						this.query.type = 1
						break;
					case '1':
						this.query.type = null
						break;
				}
				this.refresh()
			},
			async getPageProduct() {
				const res = await this.$get('/admin/mall/pageProduct', this.query)
				this.shopList = res.data.list
				this.pageTotal = res.data.totalRow
				for (let item of this.shopList) {
					this.$set(item, 'shopTitle', '课程商品')
				}
			},
			async getPageSubject() {
				const res = await this.$get('/admin/specialSubject/pageSubject', this.query)
				this.shopList = res.data.list
				this.pageTotal = res.data.totalRow
				for (let item of this.shopList) {
					this.$set(item, 'shopTitle', '专项试题')
				}
			},
			handleSelectionChange(val, index) {
				if (this.type == 1 || this.type == 2) {
					if (val.length > 1) {
						this.$refs.myTable[0].clearSelection();
						this.$refs.myTable[0].toggleRowSelection(val.pop());
					}
					if (val.length != 0) {
						this.multipleSelection = val[val.length - 1];
					}
				} else {
					this.multipleSelection = val
				}
			},
		}
	}
</script>

<style>
</style>